<template>
  <div class="app-container">
    <el-button type="text" @click="showAside()" style="display:inline;">{{bTitle}}</el-button>
    <h2 style="display:inline; margin-left:100px; color: #F5FFFA">{{selectedWorkshopName}}</h2>
    <h3 style="display:inline; margin-left:300px; color: #F5FFFA">{{formName}}</h3>
    <el-button type="text" @click="nextPage()" style="display:inline;float:right">下一页</el-button>
    <el-container>
      <el-aside width="200px" v-show="asideShow">
        <el-menu @select="showBoard" style="background: #D3D3D3">
          <el-menu-item v-for="row in workshops" :key="row.id" :index="row.id">
            <i class="el-icon-menu"></i>
            <span slot="title">{{row.name}}</span>
          </el-menu-item>
        </el-menu>
      </el-aside>
      <el-main>
        <!--设备利用率-->
        <div v-show="drawer == 1">
          <el-row :gutter="20">
            <el-col :span="4.5" v-for="item in devUseRateRow1Ids" :key="item" v-show="item.visible">
              <h4>{{item.title}}</h4>
              <div :id="item.id"
                :style="{width: '220px', height: '220px', background: '#F5F5F5'}">
              </div>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="4.5" v-for="item in devUseRateRow2Ids" :key="item" v-show="item.visible">
              <h4>{{item.title}}</h4>
              <div :id="item.id"
                :style="{width: '220px', height: '220px', background: '#F5F5F5'}">
              </div>
            </el-col>
          </el-row>
        </div>
        <!--设备任务进度信息-->
        <div v-show="drawer == 2">
          <el-row :gutter="20">
            <el-col :span="4.5" v-for="item in devTaskRow1Ids" :key="item" v-show="item.visible">
              <h4>{{item.title}}</h4>
              <div :id="item.id"
                :style="{width: '220px', height: '220px', background: '#F5F5F5'}">
              </div>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="4.5" v-for="item in devTaskRow2Ids" :key="item" v-show="item.visible">
              <h4>{{item.title}}</h4>
              <div :id="item.id"
                :style="{width: '220px', height: '220px', background: '#F5F5F5'}">
              </div>
            </el-col>
          </el-row>
        </div>
        <!--任务达成率-->
        <div v-show="drawer == 3">
          <el-row :gutter="20">
            <el-col :span="4.5" v-for="item in devTaskComplete1Ids" :key="item" v-show="item.visible">
              <h4>{{item.title}}</h4>
              <div :id="item.id"
                :style="{width: '220px', height: '220px', background: '#F5F5F5'}">
              </div>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="4.5" v-for="item in devTaskComplete2Ids" :key="item" v-show="item.visible">
              <h4>{{item.title}}</h4>
              <div :id="item.id"
                :style="{width: '220px', height: '220px', background: '#F5F5F5'}">
              </div>
            </el-col>
          </el-row>
        </div>
        <!--设备任务信息-->
        <div v-show="drawer == 4">
          <el-table :data="devTaskInfo" border style="width: 100%">
            <el-table-column prop="devName" label="设备名称" width="300">
            </el-table-column>
            <el-table-column prop="produceName" label="产品名称">
            </el-table-column>
            <el-table-column prop="count" label="计划产量" width="180">
            </el-table-column>
            <el-table-column prop="taskStatus" label="任务状态" width="180">
            </el-table-column>
          </el-table>
        </div>
        <!--待机设备-->
        <div v-show="drawer == 5">
          <el-table :data="prepareDevices" border style="width: 100%">
            <el-table-column prop="devName" label="设备名称" width="300">
            </el-table-column>
            <el-table-column prop="prepareTime" label="待机时长">
            </el-table-column>
          </el-table>
        </div>
        <!-- <div v-show="drawer == 6">
          <el-table :data="devRunParams" style="width: 100%">
            <el-table-column type="expand">
              <template slot-scope="props">
                <el-form label-position="left" inline class="demo-table-expand">
                  <el-row :gutter="20">
                    <el-col :span="4">
                      <el-form-item label="射嘴温度：">
                        <span>{{ props.row.nozzleTemperature }}</span>
                      </el-form-item>
                    </el-col>
                    <el-col :span="4">
                      <el-form-item label="一区温度：">
                        <span>{{ props.row.oneTemperature }}</span>
                      </el-form-item>
                    </el-col>
                    <el-col :span="4">
                      <el-form-item label="二区温度：">
                        <span>{{ props.row.twoTemperature }}</span>
                      </el-form-item>
                    </el-col>
                    <el-col :span="4">
                      <el-form-item label="三区温度：">
                        <span>{{ props.row.threeTemperature }}</span>
                      </el-form-item>
                    </el-col>
                    <el-col :span="4">
                      <el-form-item label="四区温度：">
                        <span>{{ props.row.fourTemperature }}</span>
                      </el-form-item>
                    </el-col>
                  </el-row>
                  <el-row :gutter="20">
                    <el-col :span="4">
                      <el-form-item label="油箱温度：">
                        <span>{{ props.row.tankTemperature }}</span>
                      </el-form-item>
                    </el-col>
                    <el-col :span="4">
                      <el-form-item label="射出压力：">
                        <span>{{ props.row.injectionPressure }}</span>
                      </el-form-item>
                    </el-col>
                    <el-col :span="4">
                      <el-form-item label="射出速度：">
                        <span>{{ props.row.injectionSpeed }}</span>
                      </el-form-item>
                    </el-col>
                    <el-col :span="4">
                      <el-form-item label="模座压力：">
                        <span>{{ props.row.dieBasePressure }}</span>
                      </el-form-item>
                    </el-col>
                    <el-col :span="4">
                      <el-form-item label="模座速度：">
                        <span>{{ props.row.dieBaseSpeed }}</span>
                      </el-form-item>
                    </el-col>
                  </el-row>
                  <el-row :gutter="20">
                    <el-col :span="4">
                      <el-form-item label="托模压力：">
                        <span>{{ props.row.supportingMouldPressure }}</span>
                      </el-form-item>
                    </el-col>
                    <el-col :span="4">
                      <el-form-item label="托模速度：">
                        <span>{{ props.row.supportingMouldSpeed }}</span>
                      </el-form-item>
                    </el-col>
                    <el-col :span="4">
                      <el-form-item label="储料压力：">
                        <span>{{ props.row.storagePressure }}</span>
                      </el-form-item>
                    </el-col>
                    <el-col :span="4">
                      <el-form-item label="储料速度：">
                        <span>{{ props.row.storageSpeed }}</span>
                      </el-form-item>
                    </el-col>
                    <el-col :span="4">
                      <el-form-item label="全程计时：">
                        <span>{{ props.row.allTime }}</span>
                      </el-form-item>
                    </el-col>
                  </el-row>
                  <el-row :gutter="20">
                    <el-col :span="4">
                      <el-form-item label="动作计时：">
                        <span>{{ props.row.actionTime }}</span>
                      </el-form-item>
                    </el-col>
                    <el-col :span="4">
                      <el-form-item label="射出位置：">
                        <span>{{ props.row.injectionPosition }}</span>
                      </el-form-item>
                    </el-col>
                    <el-col :span="4">
                      <el-form-item label="模座位置：">
                        <span>{{ props.row.dieBasePosition }}</span>
                      </el-form-item>
                    </el-col>
                    <el-col :span="4">
                      <el-form-item label="托模位置：">
                        <span>{{ props.row.supportingMouldPosition }}</span>
                      </el-form-item>
                    </el-col>
                    <el-col :span="4">
                      <el-form-item label="坐台位置：">
                        <span>{{ props.row.sittingStagePosition }}</span>
                      </el-form-item>
                    </el-col>
                  </el-row>
                  <el-row :gutter="20">
                    <el-col :span="4">
                      <el-form-item label="储料转数：">
                        <span>{{ props.row.materialStorageCount }}</span>
                      </el-form-item>
                    </el-col>
                    <el-col :span="4">
                      <el-form-item label="开模次数：">
                        <span>{{ props.row.moldOpeningTimes }}</span>
                      </el-form-item>
                    </el-col>
                    <el-col :span="4">
                      <el-form-item label="开模频率：">
                        <span>{{ props.row.moldOpeningFrequency }}</span>
                      </el-form-item>
                    </el-col>
                  </el-row>
                </el-form>
              </template>
            </el-table-column>
            <el-table-column label="设备名称" prop="devName">
            </el-table-column>
          </el-table>
        </div> -->
      </el-main>
    </el-container>
  </div>
</template>

<script>
  import {
    workshopsByRole,
    deviceByWorkshop,
    deviceUseRate,
    deviceTaskProgress,
    deviceTaskCompleteRate,
    workshopTaskInfo,
    prepareDevices,
    // workshopDevRunParams
  } from '@/api/workshop';

  export default {
    name: 'board',
    components: {
    },
    data() {
      return {
        formName: null, // 报表名称
        drawer: 1,  // 轮询页码
        bTitle: '隐藏车间',
        asideShow: false,
        workshops: [],
        defaultWorkshop: null,  //默认车间
        selectedWorkshop: null,   //选择的车间
        selectedWorkshopName: null, //选择的车间名
        wsDeviceList: [], // 车间设备列表
        formNameList: [
          "设备利用率",
          "生产任务进度",
          "任务达成率",
          "设备任务信息",
          "待机设备",
          // "当前设备参数"
        ],
        // 设备利用率ids1
        devUseRateRow1Ids: [{
          id: 'devUseRate1',
          title: '设备利用率',
          visible: false
        },{
          id: 'devUseRate2',
          title: '设备利用率',
          visible: false
        },{
          id: 'devUseRate3',
          title: '设备利用率',
          visible: false
        },{
          id: 'devUseRate4',
          title: '设备利用率',
          visible: false
        },{
          id: 'devUseRate5',
          title: '设备利用率',
          visible: false
        }],
        // 设备利用率ids2
        devUseRateRow2Ids: [{
          id: 'devUseRate6',
          title: '设备利用率',
          visible: false
        },{
          id: 'devUseRate7',
          title: '设备利用率',
          visible: false
        },{
          id: 'devUseRate8',
          title: '设备利用率',
          visible: false
        },{
          id: 'devUseRate9',
          title: '设备利用率',
          visible: false
        },{
          id: 'devUseRate10',
          title: '设备利用率',
          visible: false
        }],
        // 设备任务完成率1
        devTaskRow1Ids: [{
          id: 'devTask1',
          title: '设备任务完成率',
          visible: false
        },{
          id: 'devTask2',
          title: '设备任务完成率',
          visible: false
        },{
          id: 'devTask3',
          title: '设备任务完成率',
          visible: false
        },{
          id: 'devTask4',
          title: '设备任务完成率',
          visible: false
        },{
          id: 'devTask5',
          title: '设备任务完成率',
          visible: false
        }],
        // 设备任务完成率2
        devTaskRow2Ids: [{
          id: 'devTask6',
          title: '设备任务完成率',
          visible: false
        },{
          id: 'devTask7',
          title: '设备任务完成率',
          visible: false
        },{
          id: 'devTask8',
          title: '设备任务完成率',
          visible: false
        },{
          id: 'devTask9',
          title: '设备任务完成率',
          visible: false
        },{
          id: 'devTask10',
          title: '设备任务完成率',
          visible: false
        }],
        // 设备任务达成率1
        devTaskComplete1Ids: [{
          id: 'taskComplete1',
          title: '设备任务达成率',
          visible: false
        },{
          id: 'taskComplete2',
          title: '设备任务达成率',
          visible: false
        },{
          id: 'taskComplete3',
          title: '设备任务达成率',
          visible: false
        },{
          id: 'taskComplete4',
          title: '设备任务达成率',
          visible: false
        },{
          id: 'taskComplete5',
          title: '设备任务达成率',
          visible: false
        }],
        // 设备任务达成率2
        devTaskComplete2Ids: [{
          id: 'taskComplete6',
          title: '设备任务达成率',
          visible: false
        },{
          id: 'taskComplete7',
          title: '设备任务达成率',
          visible: false
        },{
          id: 'taskComplete8',
          title: '设备任务达成率',
          visible: false
        },{
          id: 'taskComplete9',
          title: '设备任务达成率',
          visible: false
        },{
          id: 'taskComplete10',
          title: '设备任务达成率',
          visible: false
        }],
        // 设备任务信息
        devTaskInfo: [],
        // 待机设备信息
        prepareDevices: [],
        // 设备运行参数
        // devRunParams: [],
        timerDevList: null, // 获取设备列表定时器
        timerDrawer: null   // 切换看板定时器
      }
    },
    created(){
      this.getWorkShops();
    },
    beforeDestroy(){
      this.clearTimer()
    },
    methods:{
      // // 请求车间列表
      getWorkShops() {
        workshopsByRole().then(response => {
          this.workshops = response.data;
          this.defaultWorkshop = this.workshops[0].id;
          this.selectedWorkshop = this.defaultWorkshop;
          this.selectedWorkshopName = this.workshops[0].name;
          this.showBoard(this.defaultWorkshop);
        })
      },
      // 载入看板
      showBoard(shopId){
        this.clearTimer()
        this.clearOptions()
        console.log('第'+this.drawer+'个图表页')
        this.formName = this.formNameList[this.drawer-1]
        // 切换图表
        this.timerDrawer = setInterval(() => {
          this.drawer = (this.drawer + 1) % 6;
          if(this.drawer == 0) {
            this.drawer ++;
          }
          console.log('第'+this.drawer+'个图表页')
          this.formName = this.formNameList[this.drawer-1]
        }, 20000);

        // 当前选择车间
        this.selectedWorkshop = shopId;
        this.workshops.forEach(w=>{
          if(w.id == shopId){
            this.selectedWorkshopName = w.name;
          }
        })

        // 获取设备列表
        let deviceSize = 0;
        deviceByWorkshop({workshopId: shopId}).then(response=>{
          this.wsDeviceList = response.data;
          deviceSize = this.wsDeviceList.length;
          if(deviceSize > 0) {
            let index = 0;
            this.wsDeviceList.forEach(d=>{
              this.startRun(d, index)
              index ++;
            })
            this.startRunByShop(shopId)
          }
        })
        this.timerDevList = setInterval(() => {
          deviceByWorkshop({workshopId: shopId}).then(response=>{
            this.wsDeviceList = response.data;
            deviceSize = this.wsDeviceList.length;
            if(deviceSize > 0) {
              let index = 0;
              this.wsDeviceList.forEach(d=>{
                this.startRun(d, index)
                index ++;
              })
              this.startRunByShop(shopId)
            }
          })
        }, 10000);
      },
      startRun(d, index) {
        if(this.drawer === 1) {
          // 绘画设备利用率
          this.startDevUseRate(d.id, index)
        } else if(this.drawer === 2){
          // 绘制任务完成率
          this.startDevTask(d.id, index)
        } else if(this.drawer === 3) {
          this.startDevTaskCompleteRate(d.id, index)
        }
      },
      startRunByShop(shopId) {
        if(this.drawer === 4) {
          this.startDevTaskInfo(this.selectedWorkshop)
        } else if(this.drawer === 5) {
          this.startPrepareDevices(this.selectedWorkshop)
        }
        //  else if(this.drawer === 6){
        //   this.startDevRunParams(this.selectedWorkshop)
        // }
      },
      // 设备利用率
      startDevUseRate(devId, index) {
        deviceUseRate(devId).then(response => {
          let data = response.data;
          let useRate;
          if(index <5) {
            useRate = this.$echarts.init(document.getElementById(this.devUseRateRow1Ids[index].id))
            this.$set(this.devUseRateRow1Ids[index], 'title', data.deviceInfo)
            this.$set(this.devUseRateRow1Ids[index], 'visible', true)
          } else {
            useRate = this.$echarts.init(document.getElementById(this.devUseRateRow2Ids[index-5].id))
            this.$set(this.devUseRateRow2Ids[index-5], 'title', data.deviceInfo)
            this.$set(this.devUseRateRow2Ids[index-5], 'visible', true)
          }
          useRate.setOption(this.useRateOption(data))
        })
      },
      useRateOption(data) {
        return {
          tooltip: {
            trigger: 'item'
          },
          legend: {
            top: '5%',
            left: 'center'
          },
          series: [
            {
              name: '设备利用率',
              type: 'pie',
              radius: ['40%', '70%'],
              avoidLabelOverlap: false,
              itemStyle: {
                borderRadius: 10,
                borderColor: '#fff',
                borderWidth: 2
              },
              label: {
                show: false,
                position: 'center'
              },
              emphasis: {
                label: {
                  show: true,
                  fontSize: '40',
                  fontWeight: 'bold'
                }
              },
              labelLine: {
                show: false
              },
              data: [
                {value: data.devClose, name: '关机占比'},
                {value: data.devPrepare, name: '待运行占比'},
                {value: data.devRunning, name: '运行占比'},
                {value: data.devWaiting, name: '待机占比'}
              ]
            }
          ]
        };
      },
      // 设备任务进度
      startDevTask(devId, index) {
        deviceTaskProgress(devId).then(response=>{
          let data = response.data;
          let devTask;
          if(index < 5) {
            devTask = this.$echarts.init(document.getElementById(this.devTaskRow1Ids[index].id))
            this.$set(this.devTaskRow1Ids[index], 'title', data.deviceName)
            this.$set(this.devTaskRow1Ids[index], 'visible', true)
          } else {
            devTask = this.$echarts.init(document.getElementById(this.devTaskRow2Ids[index-5].id))
            this.$set(this.devTaskRow2Ids[index-5], 'title', data.deviceName)
            this.$set(this.devTaskRow2Ids[index-5], 'visible', true)
          }
          devTask.setOption(this.devTaskOption(data))
        })
      },
      devTaskOption(data) {
        return {
          series: [{
            type: 'gauge',
            axisLine: {
              lineStyle: {
                width: 5,
                color: [
                  [0.3, '#67e0e3'],
                  [0.7, '#37a2da'],
                  [1, '#fd666d']
                ]
              }
            },
            pointer: {
              itemStyle: {
                color: 'auto'
              }
            },
            axisTick: {
              distance: -30,
              length: 8,
              lineStyle: {
                color: '#fff',
                width: 2
              }
            },
            splitLine: {
              distance: -30,
              length: 10,
              lineStyle: {
                color: '#fff',
                width: 4
              }
            },
            axisLabel: {
              color: 'auto',
              distance: 5,
              fontSize: 10
            },
            detail: {
              valueAnimation: true,
              formatter: '{value} %',
              color: 'auto'
            },
            data: [{
              value: data.rate
            }]
          }]
        };
      },
      startDevTaskCompleteRate(devId, index) {
        deviceTaskCompleteRate(devId).then(response=>{
          let data = response.data;
          let devTaskComplete;
          if(index < 5) {
            devTaskComplete = this.$echarts.init(document.getElementById(this.devTaskComplete1Ids[index].id))
            this.$set(this.devTaskComplete1Ids[index], 'title', data.deviceName)
            this.$set(this.devTaskComplete1Ids[index], 'visible', true)
          } else {
            devTaskComplete = this.$echarts.init(document.getElementById(this.devTaskComplete2Ids[index-5].id))
            this.$set(this.devTaskComplete2Ids[index-5], 'title', data.deviceName)
            this.$set(this.devTaskComplete2Ids[index-5], 'visible', true)
          }
          devTaskComplete.setOption(this.devTaskCompleteRateOption(data))
        })
      },
      devTaskCompleteRateOption(data){
        let x = new Array();
        let s = new Array();
        data.list.forEach(e=>{
          x.push(e.taskName)
          s.push(e.completeRate)
        })

        return {
            xAxis: {
                type: 'category',
                data: x
            },
            yAxis: {
                type: 'value'
            },
            series: [{
                data: s,
                type: 'line',
                smooth: true
            }]
        };
      },
      startDevTaskInfo(shopId){
        workshopTaskInfo({workshopId: shopId}).then(response=>{
          this.devTaskInfo = response.data;
        })
      },
      startPrepareDevices(shopId) {
        prepareDevices({workshopId: shopId}).then(response=>{
          this.prepareDevices = response.data;
        })
      },
      // startDevRunParams(shopId) {
      //   workshopDevRunParams({workshopId: shopId}).then(response=>{
      //     this.devRunParams = response.data;
      //   })
      // },
      clearTimer() {
        clearInterval(this.timerDrawer);
        clearInterval(this.timerDevList);
        console.log('destory timer')
      },
      clearOptions(){
        this.clearDevUseRate();
      },
      clearDevUseRate(){
        this.devUseRateRow1Ids.forEach(e=>{
          let echarts = this.$echarts.init(document.getElementById(e.id));
          echarts.setOption({})
        })
      },
      showAside() {
        this.asideShow = !this.asideShow;
        if(this.asideShow){
          this.bTitle = '隐藏车间';
        } else {
          this.bTitle = '显示车间';
        }
      },
      nextPage() {
        this.drawer = (this.drawer + 1) % 6;
        if(this.drawer == 0) {
          this.drawer ++;
        }
        this.showBoard(this.selectedWorkshop);
      }
    }
  }
</script>

<style>
  .demo-table-expand {
    font-size: 0;
  }
  .demo-table-expand label {
    width: 90px;
    color: #99a9bf;
  }
  .demo-table-expand .el-form-item {
    margin-right: 0;
    margin-bottom: 0;
    width: 50%;
  }
</style>
